<template>
  <div class="text-reviews">
    <h3>用户评价 ({{ reviews.length }}条)</h3>

    <div class="review-list">
      <div v-for="review in reviews" :key="review.id" class="review-item">
        <div class="review-header">
          <span class="username">{{ review.username }}</span>
          <span class="rating">评分：{{ review.rating }}星</span>
          <span class="time">{{ review.time }}</span>
        </div>
        <p class="content">{{ review.content }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    reviews: {
      type: Array,
      default: () => [
        {
          id: 1,
          username: '用户1',
          rating: 5,
          content: '菜品很好吃，配送也很快！',
          time: '2023-05-15'
        },
        {
          id: 2,
          username: '用户2',
          rating: 4,
          content: '还不错，就是有点贵',
          time: '2023-05-10'
        }
      ]
    }
  },
  computed: {
    averageRating() {
      if (!this.reviews.length) return 0
      return this.reviews.reduce((sum, review) => sum + review.rating, 0) / this.reviews.length
    }
  }
}
</script>

<style scoped>
.text-reviews {
  font-family: Arial, sans-serif;
  padding: 15px;
  border-top: 1px solid #eee;
}

.text-reviews h3 {
  margin: 0 0 15px 0;
  font-size: 16px;
  color: #333;
}

.review-item {
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px dashed #eee;
}

.review-header {
  margin-bottom: 5px;
  font-size: 13px;
  color: #666;
}

.username {
  font-weight: bold;
  margin-right: 10px;
}

.rating {
  margin-right: 10px;
  color: #f90;
}

.time {
  color: #999;
}

.content {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #333;
}
</style>
